<!---
 添加用户信息
-->
<template>
<div class="framework-box">
  <div class="title">
      <p>
        用户是一个身份实体，它通常代表您的组织中需要访问资源的人员或应用程序。
      </p>
      <h3>通常的操作步骤如下：</h3>
      <p>
        创建用户，并为用户设置登录密码（用户登录控制台场景）或创建
        AccessKey（应用程序调用 API 场景）。
      </p>
      <p>添加用户到用户组（需要先创建用户组并完成对用户组的授权）。</p>
    </div>
  <a-form
    name="custom-validation"
    ref="formRef"
    layout="inline"
    :model="formState"
    :rules="rules"
    @finish="handleFinish"
    @finishFailed="handleFinishFailed"
  >
    <a-form-item  name="username">
      <a-input
        v-model:value="formState.username"
        type="text"
        autocomplete="off"
        placeholder="请输入账号名"
      >
         <template #prefix>
            <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
      </a-input>
    </a-form-item>
    <a-form-item  name="nickname">
      <a-input
        required
        v-model:value="formState.nickname"
        type="text"
        placeholder="请输入真实姓名"
        autocomplete="off"
      >
       <template #prefix>
            <AliwangwangOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
      </a-input>
    </a-form-item>
    <a-form-item name="phone">
      <a-input v-model:value="formState.phone" type="tel" placeholder="请输入手机号" autocomplete="off">
        <template #prefix>
            <MobileOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
       </a-input> 
    </a-form-item>
    <a-form-item name="email">
      <a-input
        v-model:value="formState.email"
        type="email"
        placeholder="请输入联系邮箱"
        autocomplete="off"
      >
      <template #prefix>
            <SendOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button  
       type="primary"
       v-auth:query 
       html-type="submit" 
       :disabled="formState.username=== '' && formState.phone === ''">
       确定
       </a-button>
      <a-button type="primary" danger 
      style="margin-left:10px" 
      @click="resetForm"
      v-auth:reset
      >重置</a-button>
    </a-form-item>
  </a-form>
</div>  
</template>
<script lang="ts">
import { RuleObject,ValidateErrorEntity} from "ant-design-vue/es/form/interface";
import { Button,Input,Form} from "ant-design-vue";
import { UserOutlined, AliwangwangOutlined,MobileOutlined,SendOutlined} from "@ant-design/icons-vue";
import { defineComponent, reactive, ref, UnwrapRef } from "vue";
interface FormState {
      username:string,
      nickname:string,
      phone:number,
      email:string,
      department:string,
 }
export default defineComponent({
    components: {
      [Button.name]:Button,
      [Input.name]:Input,
      [Form.name]:Form,
      [Form.Item.name]:Form.Item,
      UserOutlined,
      AliwangwangOutlined,
      MobileOutlined,
      SendOutlined
  },
  setup() {
    const formRef = ref();
    const layout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };
    const formState: UnwrapRef<FormState> = reactive({
      username: "",
      nickname: "",
      phone: "",
      email: "",
      department: "",
    });

    const rules = {
      //表单检证
      username: [
        { required:false, message: "账号名不能为空", trigger: "change" },
        {
          min: 3,
          max: 20,
          message: "账号名长度为3至20个字符之间",
          trigger: "change",
        },{
          pattern: /^[A-Za-z]{1}[A-Za-z0-9]/, ///^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,20}$/
          message: "账号必须是英文母字开头和数字组成",
        },
      ],
      nickname: [
        { required: false, message: "真实姓名不能为空", trigger: "change" },
        {
          min:2,
          max:20,
          message: "真实姓名名长度为2至20个字符之间",
          trigger: "change",
        },{
          pattern: /^[\u4e00-\u9fa5]+$/, ///^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,20}$/
          message: "真实姓名必须为中文汉字",
        }
      ],
      phone: [
        {
          required: false,
          message: "手机号不能为空",
          trigger: "change",
        },
        {
          min: 11,
          max: 11,
          message: "手机号为11个数字组成",
          trigger: "change",
        },
        {
          pattern: /^1[3-9]\d{9}$/,
          message: "手机号格式错误",
        },
      ],
      email: [
        {
          required: false,
          message: "邮箱不能为空",
          trigger: "change",
        },
        {
          pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
          message: "邮箱格式错误",
        },
      ],
      department: [
        { required: false, message: "部门不能为空", trigger: "change" },
      ],
    };

    const handleFinish = (values) => {
      //提交表单且数据验证成功后回调事件
      console.log(values);
      //userAadd(values);
    };
    const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
      //提交表单且数据验证失败后回调事件
      console.log(errors);
    };
    const resetForm = () => {//重置
      formRef.value.resetFields();
    };
    return {
      formState,
      formRef,
      rules,
      handleFinishFailed,
      handleFinish,
      resetForm
    };
  },
});
</script>

<style>
.title {
  font-size: 12px;
}
</style>
